<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:sec="http://www.springframework.org/security/tags">
    <h:head>
        <title>Temas</title>
        <h:outputStylesheet library="styles" name="main.css"/>
        <style type="text/css">

            .ui-growl {

                top: 40px;
                left:1px;
            }
            .ui-growl-item-container {
                color: beige;
                font-size: 12px;
                background-color: captiontext; 

            }


        </style>
    </h:head>


    <h:body style="background-color: 2c3e54;">
        <p:growl sticky="true"/>
        <center>
            <p:layout style="min-width:400px;min-height:200px;max-width:1000px;" id="layout"> 
                <p:layoutUnit position="center">
                    <p:toolbar>
                        <p:toolbarGroup align="left">
                            <c:if test="${empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                <h:outputLink value="registrarUsuario-flow" >
                                    <h:panelGrid columns="1">
                                        <table><tr> <td>
                                            <h:outputText value="#{msg.registrar_msg}" style="color: whitesmoke " />
                                            </td></tr></table>
                                    </h:panelGrid>
                                </h:outputLink>
                            </c:if>

                            <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                <h:panelGrid columns="2">
                                    <p:column>

                                        <h:outputLink value="crearTema-flow"   >
                                            <c:if test="${ msg.btn_perfil == 'ES' }" >
                                                <div class="botontemaes">
                                                    <table class="botontemaes" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                            <c:if test="${ msg.btn_perfil == 'EN' }" >
                                                <div class="botontemaen">
                                                    <table class="botontemaen" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                        </h:outputLink>
                                    </p:column>

                                    <p:column>
                                        <h:outputLink value="editarPerfil-flow"   >
                                            <c:if test="${ msg.btn_perfil == 'ES' }" >
                                                <div class="botonperfiles">
                                                    <table class="botonperfiles" style="height: 25px;width: 88px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>

                                            <c:if test="${ msg.btn_perfil == 'EN' }" >
                                                <div class="botonperfilen">
                                                    <table class="botonperfilen" style="height: 25px;width: 88px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                        </h:outputLink>            
                                    </p:column>                              
                                </h:panelGrid>
                            </c:if>
                        </p:toolbarGroup>

                        <p:toolbarGroup align="right">   
                            <h:panelGrid columns="2">

                                <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                    <p:column  >
                                        <h:outputText value="#{msg.estas_conectado}" style="font-size:16px; color: whitesmoke" />  
                                        <h:outputText value=" ${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username} " style="font-size:18px;   color: chartreuse; font-weight: bold;" /> 
                                    </p:column>

                                    <p:column>
                                        <h:outputLink value="logout-flow">                   
                                            <div class="botonONOFF">
                                                <table class="botonONOFF" style="height: 24px;width: 24px;">
                                                    <tr><td></td></tr>
                                                </table>
                                            </div>
                                        </h:outputLink>
                                    </p:column>
                                </c:if>
                            </h:panelGrid>

                            <c:if test="${empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">   
                                <h:form style="height: 15px;">
                                    <h:outputLabel for="usernames" value="#{msg.usuario} " style="font-size:12px;" />                     
                                    <p:inputText id="usernames" value="#{usuarioController.usuario.username}" size="12" 
                                                 style="height: 25px;font-size:  12px;" />
                                    <h:outputLabel for="passwords" value="#{msg.password} " style="font-size:  12px;" />                   
                                    <p:inputText id="passwords" type="password" value="#{usuarioController.usuario.password}" 
                                                 size="12" style="height: 25px;font-size:12px;"/>           
                                    <p:commandButton  value="#{msg.conectar}" icon="ui-icon-arrowreturnthick-1-e" ajax="false" 
                                                      style="height: 30px;width: 100px;font-size: 12px" action="irLoginUsuario"  />  
                                </h:form>
                            </c:if>
                        </p:toolbarGroup>  
                    </p:toolbar>

                    <p:dataTable id="temas" value="#{temaController.temas}"
                                 var="tema" emptyMessage="#{msg.no_temas}">

                        <!-- ESTO PERTENECE AL DATATABLE PARA PAGINAR, PERO CON APPENGINE NO FUNCIONA 
                                paginator="true" rows="10"  
                                paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                rowsPerPageTemplate="5,10,15" 
                        -->

                        <p:column >
                            <f:facet name="header">
                                <h:outputText  value="#{msg.titulo}"/>
                            </f:facet>                             
                            <h:form>
                                <p:commandLink value="#{tema.titulo}" action="irAComentarios" ajax="false" title="#{msg.ir_tema}">
                                    <f:setPropertyActionListener target="#{temaController.tema}" value="#{tema}" />
                                </p:commandLink>
                            </h:form> 
                        </p:column>  

                        <p:column style="width: 5px;" >
                            <f:facet name="header">
                                <h:outputText value="#{msg.autor}"/>
                            </f:facet >                       
                            <h:outputLabel value="#{tema.autor}" escape="false" style="font-weight: bold"/>
                        </p:column>

                        <p:column style="width: 100px;">
                            <f:facet name="header">
                                <h:outputText value="#{msg.fecha}"/>
                            </f:facet >                       
                            <h:outputLabel value="#{tema.fecha}" escape="false" style="font-size: 11px" />
                        </p:column>

                        <p:column style="width: 5px;">
                            <f:facet name="header">
                                <h:outputText  value="nº"/>
                            </f:facet>                    
                            <h:outputFormat value="#{tema}" escape="false" title="#{msg.numero_respuestas}"/>
                        </p:column>

                        <sec:authorize access="hasRole('ROLE_ADMIN')">
                            <p:column style="width: 55px;">
                                <f:facet name="header">
                                    <h:outputText  value="Borrar"/>
                                </f:facet>
                                <h:form>
                                    <p:commandLink value="#{msg.borrar_tema}" action="borrarTema" ajax="false " style="font-size: 14px">
                                        <f:setPropertyActionListener value="#{tema}" target="#{temaController.tema}" />
                                    </p:commandLink>          
                                </h:form>
                            </p:column>
                        </sec:authorize>                        

                    </p:dataTable>


                    <p:toolbar>
                        <p:toolbarGroup align="left">
                            <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                                <h:panelGrid columns="1">
                                    <p:column>
                                        <h:outputLink value="crearTema-flow"   >
                                            <c:if test="${ msg.btn_perfil == 'ES' }" >
                                                <div class="botontemaes">
                                                    <table class="botontemaes" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>

                                            <c:if test="${ msg.btn_perfil == 'EN' }" >
                                                <div class="botontemaen">
                                                    <table class="botontemaen" style="height: 25px;width: 110px;"><tr> <td></td></tr></table>
                                                </div>
                                            </c:if>
                                        </h:outputLink>
                                    </p:column>
                                </h:panelGrid>
                            </c:if>
                        </p:toolbarGroup>
                    </p:toolbar>
                    <center><h:outputLink value="/index.html">#{msg.ir_a_inicio}</h:outputLink></center>

                </p:layoutUnit>
            </p:layout>
        </center>
    </h:body>
</html>